<template>
    <div class="timephoto">
        <div class="frame">

        </div>
        <div class="time"><span>{{ timevalue }}</span>
        </div>
        <div class="prompt font42">请将脸部对准方框哦</div>
    </div>
</template>
<script>

    export default {
        props: {


        },
        data(){
            return {
               timevalue:3
            }
        },
        beforeCreate(){
        },
        created(){

        },
        beforeMount(){
        },
        mounted(){
            // location.reload(true);
               // this.start();

        },
        beforeDestroy(){
        },
        destroyed(){
        },
        methods: {
            start: function(){
                var _that=this;
                var timer=setInterval(function(){
                   _that.timevalue--;
                   if(_that.timevalue<=0){

                        clearInterval(timer);
                   }
                },1000)
            }
        },
        components: {

        },
        activated: function () {
            this.timevalue=3;
            this.start();
        }
    }
</script>
<style scoped>
.frame{
    opacity:0.68;
    background:#ffffff;
    width:10rem;
    height:11.82rem;
    position: absolute;
    left: 10rem;
}
.time{
    border:0.04rem solid #ffffff;
    width:4.96rem;
    height:4.96rem;
    border-radius:100%;
    position: absolute;
    bottom: 7.45rem;
    right: 2.97rem;
    text-align: center;
    line-height: 4.96rem;
}
.time span{
    opacity:0.6;
    font-family:DINCondensed-Bold;
    font-size: 3.6rem;
    color:#ffffff;
    letter-spacing:0px;
    text-align: left;
}
.prompt{
    font-family:DFPHeiW5;
    color:#ffffff;
    width: 4.35rem;
    height: 0.42rem;
    letter-spacing:0.063rem;
    text-align:left;
    position: absolute;
    bottom: 6.28rem;
    right: 3.3rem;
}
</style>
